{% extends 'base.html' %}
{% from 'pagination.html' import render_pager %}

{% block title %}查看通讯录{% endblock %}

{% block content %}
    <div class="tpl-content-wrapper">
        <div class="row-content am-cf">
            <div class="row">
                <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                    <div class="widget am-cf">
                        <div class="widget-head am-cf">
                            <div class="widget-title  am-cf">{{ user.name }}的通讯录</div>
                        </div>
                        <div class="widget-body  am-fr">

                            <div class="am-u-sm-12" style="top: 10px">
                                <table width="100%" class="am-table am-table-compact am-table-striped tpl-table-black " id="example-r">
                                    <thead>
                                        <tr>
                                            <th>姓名</th>
                                            <th>手机号</th>
                                            <th>来自</th>
                                            <th>添加时间</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    {% for address in addresses %}
                                        <tr class="gradeX">
                                            <td>{{ address.name }}</td>
                                            <td>{{ address.mobile }}</td>
                                            <td>{{ user.name }}</td>
                                            <td>{{ address.timestamp.strftime("%Y-%m-%d") }}</td>
                                            <td>
                                                <div class="tpl-table-black-operation">
                                                    <form method="post" action="{{ url_for('.address_delete', address_id=address.id) }}">
                                                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                                                        <button class="tpl-table-black-operation-del"
                                                           onclick="confirm('确定删除吗？')">
                                                            <i class="am-icon-trash"></i> 删除
                                                        </button>
                                                    </form>
                                                </div>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>

  <div class="am-u-lg-12 am-cf">
    <div class="am-fr">
      <ul class="am-pagination tpl-pagination">
        <li {% if not pagination.has_prev %} class="am-disabled"{% endif %}>
          <a class="page-link" href="{{ url_for(request.endpoint, page=pagination.prev_num, user_id=user.id) }}">&laquo;</a>
        </li>
        {% for page in pagination.iter_pages() %}
            {% if page %}
                {% if page != pagination.page %}
                    <li>
                      <a href="{{ url_for(request.endpoint, page=page, user_id=user.id) }}">{{ page }}</a>
                    </li>
                {% else %}
                    <li class="am-active">
                        <a href="#">{{ page }}</a>
                    </li>
                {% endif %}
            {% elif ellipses != None %}
                <li class="am-disabled"><a class="page-link" href="#">&hellip;</a></li>
            {% endif %}
        {% endfor %}
        <li {% if not pagination.has_next %}class="am-disabled"{% endif %}>
          <a href="{{ url_for(request.endpoint, page=pagination.next_num, user_id=user.id) }}">&raquo;</a>
        </li>
      </ul>
    </div>
  </div>


                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}